<template>
  <div>
    <div class="back">
      <router-link to="login">
        <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_left.png" alt="back">
      </router-link>  
    </div>
    <div class="form">
          <div class="name">
              <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_person.png" alt="">
              <input type="text" placeholder="请输入用户名" v-model.trim="uname">
          </div>
          <div class="pwd">
              <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_lock.png" alt="">
              <input type="password" placeholder="密码" v-model.trim="upwd">
          </div>
          <div class="pwd">
              <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_lock.png" alt="">
              <input type="password" placeholder="重新输入密码" v-model.trim="rupwd">
          </div>
          <div class="yzm">
              <input  type="text" placeholder="请输入验证码" v-model.trim="yzminput">
              <span @click="getyzm">{{yzm}}</span>
          </div>
          <div class="btn">
              <a href="javascript:;" @click="submit">
                <Linebtn :btntext="btntext" ></Linebtn>
              </a>  
          </div>
      </div>
  </div>
</template>
<script>
import Linebtn from "../components/linebtn";
import Qs from 'qs'
export default {
  name:'reg',
  data(){
      return {
        yzm:7567,
        btntext:'注册',
        uname:'',
        upwd:'',
        rupwd:'',
        yzminput:''
      }
  },
  components:{
    Linebtn
  },
  created(){
     this.$http.get(this.$store.state.host+'/love/yzm').
    then(res=>{
        this.yzm = res.data.yzm
    }) 
  },
  methods:{
    submit(){
        this.yzm= this.yzm.toLowerCase();
        this.yzminput = this.yzminput.toLowerCase();
        if (this.upwd == this.rupwd && this.yzminput == this.yzm && this.upwd !== '' && this.yzminput !== '') {
            this.$http.post(this.$store.state.host + '/love/reg', Qs.stringify({
                userName: this.uname,
                userPassWord: this.upwd
            })).then(res => {
                if(res.data.state){
                    this.$router.push('/main')
                }        
            })
        }else{
            this.btntext='注册失败'
            const that = this;
            setTimeout(function() {
                that.btntext='注册'
            }, 200);
        }
    },
    getyzm(){
        this.$http.get(this.$store.state.host+'/love/yzm').
        then(res=>{
        this.yzm = res.data.yzm
        console.log(res.data);
    })
    }
  }
}
</script>
<style lang="less" scoped>
  @w:75rem;
  .back {
    width: 552/@w;
    margin: 0 auto;
    img {
      width: 28/@w;
      height: 32/@w;
    }
  }
  .form {
        padding-top: 216/@w;
        width: 552/@w;
        margin: 0 auto;
        .name , .pwd {
            overflow: hidden;
        }
        div {
            margin-bottom: 70/@w;
            // overflow: hidden;
        }
        img {
            width: 43/@w;
            height: 46/@w;
            float: left;
            margin-right: 20/@w;
        }
        input {
            height: 46/@w;
            width: 480/@w;
            padding: 0;
            float: left;
            font-size: 28/@w;
            text-indent: 40px;
            -webkit-appearance: none;
            outline: none;
            border: none;
            background: transparent;
            border: none;
            border-bottom: 1px solid #808080;
            border-radius: 0;//清除苹果系统input框圆角 
        }
        .btn {
            border-radius: 10px;
            height: 140/@w;
        }
        .yzm {
          position: relative;
          margin-top: 20/@w;
          height: 80/@w;
          overflow: hidden;
          input {
            margin-left: 63/@w;
            width: 246/@w;
            position: absolute;
            bottom: 0;
          }
          span {
            width: 186/@w;
            height: 80/@w;
            font-size: 64/@w;
            color: #ffffff;
            background: #ff406f;
            // float: right;
            text-align: center;
            line-height: 80/@w;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
    }
</style>